const CracoLessPlugin = require('craco-less');
const pxtoviewport = require('postcss-px-to-viewport');

module.exports = {
  plugins: [
    {
      // 自定义主题
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: {
              // 当前less变量是pc库的
              // '@primary-color': '#1DA57A'
              // 使用移动端的less变量
              // https://github.com/ant-design/ant-design-mobile/blob/master/components/style/themes/default.less
              "@brand-primary": "#e94f4f",
              "@brand-primary-tap": "#e94f4f"
            },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  style: {
    postcss: {
      plugins: [
        // https://www.npmjs.com/package/postcss-px-to-viewport
        pxtoviewport({
          // 设计稿的宽度
          viewportWidth: 375,
          // 求vw精确到小数点后几位
          unitPrecision: 3,
          propList: ['*'],
          // propList: ['width', 'font-size', 'margin', 'padding'],
        })
      ]
    }
  }
}